<template>
<div id="search">
  <h1>搜索</h1>
  <h2 v-if="this.$route.query.keyword.length === 0">查询参数出错</h2>
  <h2 v-if="this.$route.query.keyword.length !== 0">以下是<span style="color: red">{{this.$route.query.keyword}}</span>搜索结果：</h2>
  <div class="cutLineHf"></div>
  <!--  电影-->
  <div class="Search" v-if="this.$route.query.keyword.length !== 0 && movieList.length !==0">
    <h2>{{$t('m.movies')}}：</h2>
    <div class="MainView-search">
      <div class="MainBox-search">
        <div  v-for="movie in movieList" :key="movie.movieId+'movie'">
          <router-link class="Box-search" :to="{name:'movieInfo',params: {id: movie.movieNameEn}}" >
            <img :src="movie.movieImg" alt="" onmouseover="this.style.boxShadow='-5px 5px 0 #0a80c1'" onmouseleave="this.style.boxShadow='0 0 0 transparent'">
            <span>{{movie.movieName}}</span>
            <div class="lab-hidden">
              <span class="lab" v-for="lab in (movie.movieGen || ' ').split(' ').slice(0, 3)" :key="lab.id">{{lab}}</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
<!--  游戏-->
  <div class="Search" v-if="this.$route.query.keyword.length !== 0 && gameList.length !==0">
    <h2>{{$t('m.game')}}：</h2>
    <div class="MainView-search">
      <div class="MainBox-search">
        <div  v-for="game in gameList" :key="game.gameId+'game'">
          <router-link class="Box-search" :to="{name:'gameInfo',params: {id: game.gameNameEn}}">
            <img :src="game.gameImg" alt="" onmouseover="this.style.boxShadow='-5px 5px 0 #ce52ff'" onmouseleave="this.style.boxShadow='0 0 0 transparent'" >
            <span>{{game.gameName}}</span>
            <div class="lab-hidden">
              <span class="lab" v-for="lab in (game.gameTags || ' ').split(' ').slice(0, 3)" :key="lab.id">{{lab}}</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
<!--  音乐-->
  <div class="Search" v-if="this.$route.query.keyword.length !== 0 && musicList.length !==0">
    <h2>{{$t('m.music')}}：</h2>
    <div class="MainView-search">
      <div class="MainBox-search">
        <div  v-for="(music,index) in musicList" :key="index+'music'">
          <router-link class="Box-search" :to="{name:'musicInfo',params: {id: music.musicNameEn}}">
            <img style="height: 170px" :src="music.albumImg" alt="" onmouseover="this.style.boxShadow='-5px 5px 0 #31c27c'" onmouseleave="this.style.boxShadow='0 0 0 transparent'">
            <span>{{music.musicName}}</span>
            <div class="lab-hidden">
              <span class="lab" v-for="lab in (music.musicGen || ' ').split(' ').slice(0, 3)" :key="lab.id">{{lab}}</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "Search",
  data(){
    return{
      gameList:[],
      movieList:[],
      musicList:[],
    }
  },
  watch:{
    $route:function (val){
      this.getGameSearch(val.query.keyword)
      this.getMovieSearch(val.query.keyword)
      this.getMusicSearch(val.query.keyword)
    },
  },
  created(){
    this.getGameSearch(this.$route.query.keyword)
    this.getMovieSearch(this.$route.query.keyword)
    this.getMusicSearch(this.$route.query.keyword)
  },
  mounted(){

  },
  methods:{
    async getGameSearch(input){
      const {data:res} = await this.$axios.post('v1/getSearchGame',{gameName:input})
      if(res.code === 200){
        this.gameList = res.data
      }
    },
    async getMovieSearch(input){
      const {data:res} = await this.$axios.post('v1/getSearchMovie',{movieName:input})
      if(res.code === 200){
        this.movieList = res.data
      }
    },
    async getMusicSearch(input){
      const {data:res} = await this.$axios.post('v1/getSearchMusic',{musicName:input})
      if(res.code === 200){
        this.musicList = res.data
      }
    },
  }
}
</script>

<style lang="less" scoped>
#search{
  padding: 30px;
  width: 100%;
  h1{
    font-size: 60px;
  }
  h1,h2{
    color: var(--theme-fontMain);
  }
}
.Search{
  width: 100%;
  h1{
    font-size: 60px;
  }

  .MainView-search{
    margin-top: 20px;
    width: 100%;
    height: 100%;
    /*background-color: red;*/

  }
  .MainBox-search{
    display: flex;
    flex-wrap: wrap;
    /*background-color: blue;*/
    /*opacity: 0.5;*/
    margin-right: -20px;
  }
  .Box-search{
    /*width: 100px;*/
    /*background-color: blue;*/
    display: flex;
    flex-flow: column;
    margin-right: 21.71px;
    margin-bottom: 21.71px;
    span{
      margin: 5px 0;
      font-size: 16px;
      font-weight: 800;
    }
    img{
      width: 170px;
      height: 238px;
      border-radius: 6px;
      transition: all 0.1s ease-in-out;
    }
    img:hover{
      transform: translate3d(5px, -5px, 0);
    }
    .lab-hidden{
      span{
        font-size: 12px;
        margin: 0 5px 5px 0;
      }
    }
  }

}

</style>
